<template>
	<Row type="flex" class="search" :gutter="10">
		<Col span="6">
		<Select v-model="brands.value" filterable clearable @on-change="brands.onChange()">
			<Option v-for="brand in brands.list" :value="brand.name" :key="brand.name">{{ brand.name }}</Option>
		</Select>
		</Col>
		<Col span="6">
		<Select v-model="brands.shopValue" filterable clearable @on-select="brands.location">
			<Option v-for="shop in brands.getShops()" :value="shop.name" :key="shop.name">{{ shop.name }}</Option>
		</Select>
		</Col>
		<Col span="12">
		<Row type="flex" justify="end" :gutter="10">
			<Col>
			<Button type="default" @click="onSaveRemote">保存</Button>
			</Col>
			<Col>
			<Button type="default" @click="onSaveConfig">下载C</Button>
			</Col>
			<!-- <Col>
			<Button type="default" @click="onSaveStorage">保存</Button>
			</Col> -->
		</Row>
		</Col>
	</Row>
	<Row v-for="(item, index) in list" :gutter="10" class="dir" :key="index" :id="'row-' + index">
		<Col span="6">
		<Row type="flex" justify="space-between" :gutter="10" style="margin-bottom:10px;">
			<Col flex="1" v-if="item.edit == 0">
			{{ item.dir }}
			</Col>
			<Col flex="1" v-if="item.edit == 1">
			<Input v-model="item.dir"></Input>
			</Col>
			<Col flex="0">
			<Icon type="ios-create" v-if="item.edit == 0" @click="item.edit = 1" class="icon" size="20" />
			</Col>
		</Row>
		<Row v-if="item.edit == 1">
			<Button type="default" @click="item.edit = 0">保存</Button>
		</Row>
		<Row>
			<Col>
			<Form>
				<FormItem label="显示" label-width="40">
					<Select v-model="item.config.col">
						<Option :value="2">2列</Option>
						<Option :value="1">1列</Option>
						<Option :value="0">0列</Option>
					</Select>
				</FormItem>
			</Form>
			</Col>
		</Row>
		</Col>
		<Col span="16">
		<draggable v-model="item.list" @end="onEnd(item.list)" :animation="300" itemKey="index" :tag="Row" class="files"
			:class="['c' + item.config.col]">
			<template #item="{ element, index }">
				<Row class="file" type="flex" align="middle" justify="center">
					<Col>
					{{ element.file }}
					</Col>
				</Row>
			</template>
		</draggable>
		</Col>
	</Row>
	<Row class="blank100"></Row>
</template>
<script>
import file from '../../../nodejs/250927/test/file.json';
import config from '../../../nodejs/250927/test/config.json';
//import file from '../../../../zhuanti_vue3/src/pages/shop10/file.json';
//import config from '../../../../zhuanti_vue3/src/pages/shop10/config.json';
// import file from '../../../../shop10/file.json';
// import config from '../../../../shop10/config.json';
import draggable from 'vuedraggable'
import _ from 'lodash'
import saveAs from '@/libs/FileSaver.js'
import axios from 'axios'
import store from 'store'
export default {
	components: {
		draggable
	},
	data() {
		return {
			list: [],
			brands: {
				value: '',
				list: [],
				shopValue: '',
				onChange: () => {
					this.brands.shopValue = '';
				},
				location: (shop) => {
					let shopValue = shop.value;
					let { value } = this.brands;
					let index = this.list.findIndex(res => res.dir.includes(value + '/' + shopValue));
					let dom = document.querySelector('#row-' + index);
					let { y } = dom.getBoundingClientRect();
					document.documentElement.scrollTop += y - 40;
				},
				getShops: () => {
					let value = this.brands.value;
					let shops = []
					let brand = this.brands.list.find(res => res.name == value);
					if (brand) {
						shops = brand.child;
					}
					return shops;
				}
			}
		}
	},
	methods: {
		onEnd(list) {
			list.forEach((res, index) => {
				res.order = index;
			});
		},
		onSave() {
			let list2obj = {}
			this.list.forEach(res => {
				list2obj[res.dir] = {
					dir: res.dir,
					list: res.list
				}
			});
			const content = JSON.stringify(list2obj);//data为json格式的数据
			var blob = new Blob([content], { type: "text/plain;charset=utf-8" });
			let fileName = 'file.json'
			saveAs(blob, fileName);
		},
		onReadRemote() {
			axios.post('http://localhost/test-vue3/nodejs/250927/file.php?r=1').then(res => {
				console.log(res);
			});
		},
		onSaveRemote() {
			let list2obj = {}
			this.list.forEach(res => {
				list2obj[res.odir] = {
					dir: res.dir,
					list: res.list
				}
			});
			axios.post('http://localhost/test-vue3/nodejs/250927/file.php', list2obj).then(res => {
				console.log(res);
			});
		},
		onSaveStorage() {
			store.set('250927', this.list);
		},
		onSaveConfig() {
			let list2obj = {}
			this.list.forEach(res => {
				list2obj[res.dir] = res.config;
			});
			const content = JSON.stringify(list2obj);//data为json格式的数据
			var blob = new Blob([content], { type: "text/plain;charset=utf-8" });
			let fileName = 'config.json'
			saveAs(blob, fileName);
		},
		initSelect(file) {
			const keys = _.keys(file);
			const brands = [];
			keys.forEach(res => {
				const [brandName, shopName] = res.split('/');
				let brand = brands.find(res => res.name == brandName);
				let shop = {
					name: shopName
				}
				if (brand) {
					brand.child.push(shop)
				} else {
					brand = {
						name: brandName,
						child: [shop]
					}
					brands.push(brand);
				}
			});
			this.brands.list = brands;
		}
	},
	mounted() {
		let list = []
		this.initSelect(file);
		_.forIn(file, (value, key) => {
			let obj = {
				edit: 0,
				dir: value.dir,
				odir: value.dir,
				list: value.list,
				config: config[key] || {}
			}
			list.push(obj);
		});
		this.list = list;
	}
}
</script>
<style lang="scss" scoped>
.search {
	margin-bottom: 10px;
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 1;
}
.dir {
	margin-bottom: 10px;
}
.files {
	display: grid;
	grid-template-columns: repeat(auto-fill, 150px);
	&.c1 {
		grid-template-columns: repeat(1, 150px);
	}
	&.c2 {
		grid-template-columns: repeat(2, 150px);
	}
	grid-auto-rows: 50px;
	gap: 5px;
}
.file {
	cursor: pointer;
	border: 1px solid #ccc;
	text-align: center;
	background: #fff;
	&:active {
		//background: rgba(30, 143, 255, 0.1);
	}
}
.blank100 {
	height: 100vh;
}
.icon {
	cursor: pointer;
}
</style>